/*@import url(https://fonts.googleapis.com/css?family=Orbitron);*/
/*@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap);*/
/*@import url(https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap);*/

:root {
    --aspect-ratio: calc(1334 / 750)
}

.intro {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/intro-letteraa9098578a60b8a17926.png) 50% 50% no-repeat;
    background-size: cover;
    z-index: 20;
    left: 0;
    z-index: 1000;
    display: block;
    cursor: pointer
}

.room {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent url(../images/assets/violin-bgef1749c374e732f681c4.png) 50% 50% no-repeat;
    background-size: cover;
    user-select: none;
    -webkit-user-select: none
}

.clock {
    user-select: none;
    position: absolute;
    width: 13%;
    height: 9%;
    top: 12.8%;
    left: 66%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36pt;
    color: red;
    font-family: "ZCOOL QingKe HuangYou", "JetBrains Mono", "consolas", cursive
}

.nothing {
    display: none
}

.start {
    position: absolute;
    width: 13.5%;
    height: 7%;
    top: 71%;
    left: 41%;
    transform: rotate(6deg)
}

.journal-clickable {
    cursor: pointer;
    position: absolute;
    display: none;
    width: 9%;
    height: 14%;
    top: 82%;
    left: 88%;
    transform: skew(-48deg, 25deg);
    z-index: 3
}

.journal {
    cursor: pointer;
    position: absolute;
    display: none;
    width: 17%;
    height: 22%;
    top: 78%;
    left: 83%;
    background: transparent url(../images/assets/journal6a078a224c65e9a8c08f.png) 50% 50% no-repeat;
    background-size: cover
}

.tv-screen {
    display: none;
    height: 35%;
    width: 35.1%;
    transform: rotate(-.1deg);
    position: absolute;
    top: 4.4%;
    left: 28.5%
}

.channelUp-button {
    cursor: pointer;
    position: absolute;
    height: 5%;
    width: 3%;
    top: 9%;
    left: 24.5%
}

.channelDown-button {
    cursor: pointer;
    position: absolute;
    height: 5%;
    width: 3%;
    top: 16.5%;
    left: 24.5%
}

.conductor {
    position: absolute;
    box-shadow: 0 0 3px 1px #000 inset;
    display: block;
    height: 100%;
    width: 100%;
    background: transparent url(../images/assets/conductor4db44770e4f82142a4a580.gif) 50% 50% no-repeat;
    background-size: cover
}

.circle-of-fifths {
    position: absolute;
    box-shadow: 0 0 3px 1px #000 inset;
    display: none;
    height: 100%;
    width: 100%;
    background: transparent url(../images/assets/circle-of-fifths8de8ec9e3b90029f3cf2.png) 50% 50% no-repeat;
    background-size: cover
}

.drum {
    background: transparent url(../images/assets/snare-drum2b14c8cd5e079b553728b.png) 50% 50% no-repeat;
    height: 27%;
    width: 19%;
    position: absolute;
    top: 66.2%;
    left: 68.2%;
    background-size: cover
}

.drum-hit-area {
    position: absolute;
    height: 50%;
    width: 85%;
    left: 3%;
    cursor: pointer;
    border-radius: 50%
}

.mirror-question {
    position: absolute;
    left: 4%;
    top: 32%;
    width: 20%;
    height: 35%;
    display: none;
    background: transparent url(../images/assets/question06580d7b3eef299ca1e1.png) 50% 50% no-repeat;
    background-size: cover
}

.mirror {
    height: 52%;
    width: 24%;
    position: absolute;
    top: 25%;
    left: 2%;
    opacity: 100%
}

.neon-lights {
    position: absolute;
    height: 6%;
    width: 3.4%
}

.on-air {
    left: 77%;
    top: 50%
}

.on-air.off {
    background: transparent url(../images/assets/on-air-off55ecb9be0b91cc639f78.png) 50% 50% no-repeat;
    background-size: cover
}

.on-air.on {
    display: none;
    background: transparent url(../images/assets/on-air-on1d247e54ea83b1447028.png) 50% 50% no-repeat;
    background-size: cover
}

.rec {
    left: 77%;
    top: 58%
}

.rec.off {
    background: transparent url(../images/assets/rec-off91642fede5cbf76b0a51.png) 50% 50% no-repeat;
    background-size: cover
}

.rec.on {
    display: none;
    background: transparent url(../images/assets/rec-on5ec2c8499759b75ca07e.png) 50% 50% no-repeat;
    background-size: cover
}

.safe {
    position: absolute;
    top: 41.85%
}

.safe.closed {
    background: transparent url(../images/assets/safe-close2a066fccb0140097d0a6.png) 50% 50% no-repeat;
    background-size: cover;
    width: 22%;
    height: 28%;
    left: 35.5%;
    display: block
}

.safe.open {
    background: transparent url(../images/assets/safe-opendea93543e91c1d138f3a.png) 50% 50% no-repeat;
    background-size: cover;
    width: 25.7%;
    height: 42.4%;
    left: 35.1%;
    display: none
}

.safeNumpad {
    position: absolute;
    top: 31%;
    left: 16%;
    height: 44%;
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer
}

.safeNumpad > div {
    height: 100%;
    display: flex;
    justify-content: space-evenly
}

.safeNumpad > div > div {
    width: 100%;
    border-radius: 1px
}

.safeNumpad > div > div:hover {
    background-color: rgba(255, 255, 255, .1)
}

.safeNumpad > div > div:active {
    box-shadow: 0 0 5px 0 #000 inset
}

.safeDisplay {
    position: absolute;
    height: 10%;
    width: 29%;
    left: 16%;
    top: 20%;
    text-align: right;
    padding: 2px 2px;
    font-family: "Courier New", Courier, monospace;
    color: #292929;
    font-weight: 600
}

.tuner-display {
    background-color: rgb(31, 122, 54, .2);
    color: #fff;
    font-family: Orbitron;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.4%;
    width: 7.2%;
    position: absolute;
    top: 85%;
    left: 42.5%
}

.tuner-buttons {
    height: 8%;
    width: 1.6%;
    position: absolute;
    top: 84%;
    left: 50.1%;
    display: flex;
    flex-direction: column;
    cursor: pointer
}

.tune-up {
    flex: 4
}

.tune-down {
    flex: 4
}

.tune {
    flex: 3
}

.audio-player-display {
    position: absolute;
    height: 2.8%;
    width: 10.8%;
    top: 57.6%;
    left: 39.3%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #e7e7e7;
    font-family: "KaiTi", cursive;
    font-size: 13px
}

.audio-player-buttons > div {
    display: none;
    position: absolute;
    border-radius: 7%;
    height: 2.3%;
    width: 1.35%;
    top: 60.5%;
    cursor: pointer
}

.audio-player-buttons > div:hover {
    background-color: rgba(255, 255, 255, .1)
}

.audio-player-buttons > div:active {
    box-shadow: 0 0 5px 0 #000 inset
}

.back-button {
    left: 39.55%
}

.play-button {
    left: 41.35%
}

.stop-button {
    left: 43.15%
}

.next-button {
    left: 44.95%
}

.modal {
    display: none;
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, .7)
}

.notebook-modal {
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    background: transparent url(../images/assets/journal-content6b7bf0020599e343b261.png) 50% 50% no-repeat;
    background-size: contain
}

.violin {
    position: absolute;
    cursor: pointer;
    width: 41%;
    height: 25%;
    top: 70.6%;
    left: .8%;
    display: block;
    z-index: 3
}

.choice {
    user-select: none;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none
}

.rowContainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap
}

.hint {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    font-family: "Courier New", Courier, monospace;
    background-color: transparent;
    font-size: 20px;
    color: #f5f5f5;
    border: 1.5px solid #fff;
    border-radius: 15px;
    padding: 10px 18px;
    margin: 18px;
    user-select: none
}

.hint:hover {
    background-color: rgba(255, 255, 255, .2)
}

.rowContainer > button {
    cursor: pointer;
    font-family: "Courier New", Courier, monospace;
    background-color: transparent;
    font-size: 45px;
    color: #f5f5f5;
    border: 1.5px solid #fff;
    border-radius: 15px;
    padding: 10px 18px;
    margin: 18px;
    user-select: none
}

.rowContainer > button:hover {
    background-color: rgba(255, 255, 255, .2)
}

.hintScreen {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #f5f5f5;
    user-select: none;
    padding: 20%
}

.closeModal {
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    width: 30px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 1.5px solid #fff;
    color: #aaa;
    font-size: 28px;
    font-weight: 700;
    border-radius: 50%;
    z-index: 20
}

.perform {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    overflow: hidden
}

.perform > div[class^=manuscript] {
    position: absolute;
    transform: rotate(5deg)
}

.manuscript1 {
    width: calc(22% * 3.518 / var(--aspect-ratio));
    height: 22%;
    left: 10%;
    top: 10%;
    background: transparent url(../images/assets/manuscript1f3362ae43a69bec38ae3.png) 50% 50% no-repeat;
    background-size: contain;
    display: none
}

.manuscript2 {
    width: calc(22% / 166 * 167 / var(--aspect-ratio) * 3.622);
    height: calc(22% / 166 * 167);
    left: 30%;
    top: 0;
    background: transparent url(../images/assets/manuscript20f77460adf8df363d1ec.png) 50% 50% no-repeat;
    background-size: contain;
    display: none;
    clip-path: polygon(3% 0, 100% 0, 100% 99%, 90% 100%, 75% 77%, 41% 82%, 27% 74%, 2% 100%, 0 97%, 12% 65%, 7% 49%, 7% 17%)
}

.manuscript3 {
    width: calc(22% / 166 * 140 / var(--aspect-ratio) * 3.99);
    height: calc(22% / 166 * 140);
    left: 80%;
    top: 80%;
    background: transparent url(../images/assets/manuscript3dd353468ab066be256db.png) 50% 50% no-repeat;
    background-size: contain;
    display: none;
    clip-path: polygon(0 21%, 8% 13%, 14% 19%, 47% 0, 60% 14%, 65% 7%, 84% 10%, 90% 17%, 100% 60%, 96% 100%, 0 100%)
}

.manuscript4 {
    --height: calc(22% / 166 * 155);
    width: calc(var(--height) / var(--aspect-ratio) * 3.916);
    height: var(--height);
    left: 10%;
    top: 70%;
    background: transparent url(../images/assets/manuscript4f8d9526608b44cb808ca.png) 50% 50% no-repeat;
    background-size: contain;
    display: none;
    clip-path: polygon(6% 100%, 10% 64%, 0 26%, 3% 27%, 27% 0, 41% 9%, 75% 3%, 90% 28%, 100% 26%, 100% 100%)
}

.dialogue {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 20;
    left: 0;
    z-index: 1000;
    display: none;
    cursor: pointer
}

.dialogue-triangle {
    display: none;
    position: absolute;
    width: 2%;
    height: 2%;
    left: 50%;
    top: 55%;
    transform: translate(-50%);
    background: transparent url(../images/assets/dialogue-triangle3d25590f1e613b225720.png) 50% 50% no-repeat;
    background-size: cover;
    z-index: 1001
}

.paganini-triangle {
    display: none;
    position: absolute;
    width: 2%;
    height: 2%;
    left: 50%;
    top: 75%;
    transform: translate(-50%);
    background: transparent url(../images/assets/dialogue-triangle3d25590f1e613b225720.png) 50% 50% no-repeat;
    background-size: cover;
    z-index: 1001
}

.paganini-dialogue {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/paganini-dialogueb7ba2c3b0f7263a8f393.png) 50% 50% no-repeat;
    background-size: cover
}

.paganini-dialogue-transparent {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/paganini-dialogue-transparent9b7c4012d46c6004c2b5.png) 50% 50% no-repeat;
    background-size: cover
}

.tuning-dialogue {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/tuning-dialogue001f951ed8c02f3d6c02.png) 50% 50% no-repeat;
    background-size: cover
}

.already-in-tune {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/already-in-tune6ee795601db94416b62b.png) 50% 50% no-repeat;
    background-size: cover
}

.strange-sound-dialogue {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/strange-sounde08874e94b48cc884fbd.png) 50% 50% no-repeat;
    background-size: cover;
    cursor: pointer
}

.found-manuscript {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/found-manuscript24cf1a65c92fa52a8292.png) 50% 50% no-repeat;
    background-size: cover;
    cursor: pointer
}

.found-journal {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent url(../images/assets/found-journal1dc0a83da1b4fe3bb08d.png) 50% 50% no-repeat;
    background-size: cover;
    cursor: pointer
}

.animate-show-dialogue {
    animation: showDialogue .8s
}

@keyframes showDialogue {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.animate-close-dialogue {
    animation: closeDialogue .8s;
    animation-fill-mode: forwards
}

@keyframes closeDialogue {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.performPlay {
    cursor: pointer;
    font-family: "Courier New", Courier, monospace;
    background-color: transparent;
    font-size: 40px;
    color: #f5f5f5;
    border: 1.5px solid #fff;
    border-radius: 15px;
    padding: 10px 18px;
    margin: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70%;
    display: none
}

.performPlay:hover {
    background-color: rgba(255, 255, 255, .2)
}

.practice {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background: transparent url(../images/assets/violin-fingerboard7035b429ec93e21bb742.png) 50% 50% no-repeat;
    background-size: cover
}

.violinNote {
    cursor: pointer;
    position: absolute;
    height: 9.5%;
    width: 5.4%;
    border-radius: 50%
}

.f5 {
    left: 16.35%;
    top: 27.95%
}

.aSharp4 {
    left: 16.38%;
    top: 39.2%
}

.dSharp4 {
    left: 16.38%;
    top: 50.5%
}

.gSharp3 {
    left: 16.38%;
    top: 62%
}

.fSharp5 {
    left: 25.75%;
    top: 27.5%
}

.b4 {
    left: 25.75%;
    top: 39.2%
}

.e4 {
    left: 25.75%;
    top: 51%
}

.a3 {
    left: 25.75%;
    top: 62.8%
}

.g5 {
    left: 35.1%;
    top: 26.9%
}

.c5 {
    left: 35.1%;
    top: 38.9%
}

.f4 {
    left: 35.1%;
    top: 51%
}

.aSharp3 {
    left: 35.1%;
    top: 62.8%
}

.gSharp5 {
    left: 44.45%;
    top: 26.15%
}

.cSharp5 {
    left: 44.45%;
    top: 38.4%
}

.fSharp4 {
    left: 44.45%;
    top: 51.5%
}

.b3 {
    left: 44.45%;
    top: 63.6%
}

.a5 {
    left: 53.8%;
    top: 25.3%
}

.d5 {
    left: 53.8%;
    top: 38.6%
}

.g4 {
    left: 53.8%;
    top: 52%
}

.c4 {
    left: 53.8%;
    top: 64.8%
}

.aSharp5 {
    left: 63.15%;
    top: 24.6%
}

.dSharp5 {
    left: 63.15%;
    top: 38.1%
}

.gSharp4 {
    left: 63.15%;
    top: 52.2%
}

.cSharp4 {
    left: 63.15%;
    top: 65%
}

.b5 {
    left: 72.55%;
    top: 24.2%
}

.e5 {
    left: 72.55%;
    top: 37.9%
}

.a4 {
    left: 72.55%;
    top: 52.8%
}

.d4 {
    left: 72.55%;
    top: 65.8%
}

.violinNote:hover {
    background-color: rgba(180, 180, 180, .4);
    border-radius: 50%
}

* {
    box-sizing: border-box
}

:root {
    --aspect-ratio: calc(1334 / 750)
}

i {
    font-family: FontAwesome !important;
    font-style: normal;
    cursor: pointer
}

body {
    background-color: #000;
    color: #f5f5f5;
    font-family: "Courier New", Courier, monospace;
    align-items: center;
    justify-content: center;
    display: flex
}

.stage {
    margin: 0 auto;
    max-width: 1334px;
    max-height: 750px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    overflow: hidden
}

.level0 {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: block
}

.level1 {
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: block
}

.container {
    display: block;
    position: absolute;
    background: transparent url(../images/assets/welcome_blank720b5007e4b00befe9f0.png) 50% 50% no-repeat;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 83%;
    top: 0;
    text-align: center
}

.story {
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 3% 3%;
    width: 66vw;
    top: 15%;
    left: 16.5%
}

.story > p {
    color: #ffe5ce;
    margin: 4%;
    font-size: 1.8vw;
    font-weight: 500;
    font-family: 'Bodoni Moda', serif;
    text-shadow: 2px 1.5px #000
}

.header {
    display: block;
    position: absolute;
    top: 61%;
    left: 30%;
    font-family: 'Bodoni Moda', serif;
    text-shadow: 1px 1.5px #000;
    color: #fff;
    font-weight: 500;
    font-size: 2vw
}

.playButtons {
    position: absolute;
    display: flex;
    top: 66%;
    height: 40%;
    width: 70%;
    left: 51%;
    transform: translateX(-50%)
}

a {
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 10px
}

.violinist {
    display: block;
    width: 46%;
    height: 65%;
    padding: 5px 10px;
    border-radius: 5px;
    background: transparent url(../images/assets/violinist_hoverc2d079c529d822671751.png) 50% 50% no-repeat;
    background-size: contain
}

/*.violinist:hover {*/
/*    background: transparent url(../images/assets/violinistd0af39bf8bb2fd54a4cc.png) 50% 50% no-repeat !important;*/
/*    background-size: contain !important;*/
/*    width: 47%*/
/*}*/

.pianist {
    display: block;
    width: 46%;
    height: 65%;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 30px;
    background: transparent url(../images/assets/pianist_hover64c0d05cb4458de8e483.png) 50% 50% no-repeat;
    background-size: contain
}

/*.pianist:hover {*/
/*    background: transparent url(../images/assets/pianist24527a923a25fa952843.png) 50% 50% no-repeat !important;*/
/*    background-size: contain !important;*/
/*    width: 47%*/
/*}*/

.loader {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    z-index: 1000
}

body:not(.loaded) .loader {
    display: block
}

.rectangle {
    width: 100%;
    height: 140%;
    background-color: #000;
    z-index: 1000;
    overflow: hidden
}

.progress {
    position: absolute;
    background: #f5f5f5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 50%;
    border: 1px solid #fff;
    overflow: hidden;
    border-radius: 4px
}

.progress-bar {
    float: left;
    background-color: #5bc0de;
    height: 100%;
    width: 10%;
    background-size: 40px 40px;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15), transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    transition: width .6s ease
}

.end-screen {
    display: none;
    background: #000;
    position: absolute;
    width: 100%;
    height: 0;
    padding-top: 105%;
    top: 0;
    margin: 0 auto
}

.piano-end-bg {
    background: transparent url(../images/assets/piano_endbg0d1016cf777876b91f48.png) 50% 50% no-repeat;
    background-size: cover;
    position: absolute;
    height: 0;
    padding-top: 120%;
    width: 100%;
    top: 0;
    left: 50%;
    font-size: 28px;
    transform: translateX(-50%)
}

.violin-end-bg {
    background: transparent url(../images/assets/violin_endbge393c4132d549f4ab145.png) 50% 50% no-repeat;
    background-size: cover;
    position: absolute;
    height: 0;
    padding-top: 120%;
    width: 100%;
    top: 0;
    left: 50%;
    font-size: 28px;
    transform: translateX(-50%)
}

.end-message {
    position: absolute;
    height: 0;
    width: 100%;
    top: 18.8%;
    left: 50%;
    font-size: 2.6vw;
    font-weight: 600;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    display: none
}

.video {
    position: absolute;
    top: 38.6%;
    height: 30%;
    width: 86%;
    left: 50%;
    transform: translateX(-50%)
}

.photo-frame {
    background: url(../images/assets/photobooth-036c4f041562060bd017a3.png) 50% 50% no-repeat;
    background-size: contain;
    position: absolute;
    display: none;
    visibility: hidden
}

.video-circle {
    position: absolute;
    border-radius: 50%;
    width: 30%;
    padding-bottom: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center
}

.video-view {
    width: 150%;
    padding-top: 100%;
    position: absolute;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg)
}

.take-photo {
    cursor: pointer;
    position: absolute;
    top: 73.5%;
    font-size: 2vw;
    color: #f5f5f5;
    padding: 1% 2%;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: 1px solid grey;
    border-radius: 10%
}

#canvas {
    position: absolute;
    display: none
}

.output {
    top: -21.3%;
    left: -12.55%;
    height: 144%;
    position: absolute
}

.countdown {
    padding-top: 60%;
    opacity: 1;
    display: none;
    font-size: 80px;
    z-index: 10000;
    animation: countdownAnimation 1s;
    animation-iteration-count: 3
}

@keyframes countdownAnimation {
    0% {
        opacity: 0
    }
    20% {
        opacity: 1
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.socials {
    position: absolute;
    height: 0;
    top: 80%;
    left: 50%;
    font-size: 2.6vw;
    transform: translateX(-50%);
    background-color: pink
}

.socials > a {
    margin: -8px
}

.rotateme {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #000 url(../images/assets/rotate-screen2e92db01a91cae1c8efd9.png) 50% 50% no-repeat;
    background-size: cover;
    background-size: 60%;
    z-index: 901
}

.hidden-desktop {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 900;
    display: none;
    background-color: #000
}

@media only screen and (max-width: 650px) {
    .hidden-desktop {
        display: block
    }
}

.escape {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%
}

.escape-message {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px;
    text-align: justify
}

.escape-numpad-image {
    position: absolute;
    width: 60%;
    height: 110%;
    left: 52%;
    top: 75%;
    transform: translate(-50%, -50%);
    background: transparent url(../images/assets/escape-numpad0de6edf78a5205354cc2.png) 50% 50% no-repeat;
    background-size: cover
}

.escape-numpad {
    position: absolute;
    top: 35.5%;
    left: 43.6%;
    height: 24.6%;
    width: 11.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer
}

.escape-numpad > div {
    height: 100%;
    display: flex;
    justify-content: space-evenly
}

.escape-numpad > div > div {
    width: 100%;
    border-radius: 1px
}

.escape-numpad > div > div:hover {
    background-color: rgba(255, 255, 255, .15);
    box-shadow: 0 0 3px 1px #000 inset
}

.escape-numpad > div > div:active {
    background-color: rgba(73, 147, 165, .445);
    box-shadow: 0 0 3px 1px #000 inset
}

.escape-display {
    position: absolute;
    height: 8.2%;
    width: 12.4%;
    top: 63%;
    left: 43.2%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 3vw
}